<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" title="主页" autoBack="true" titleStyle="color:#000" leftIconColor="#000" bgColor="#F9C022"></u-navbar>
        <!-- <view class="xilu_bg">
            <image :src="userinfo.avatar" mode="aspectFit"></image>
        </view>
        <view class="xilu_bg_fix" :style="{'height':statusBarHeight+'px'}">
            <image :src="userinfo.avatar" mode="aspectFill"></image>
        </view> -->
         <view class="xilu_bg_block"></view>
        <view class="xilu_detail">
            <view class="flex-box">
                <image :src="userinfo.avatar" mode="aspectFill" class="xilu_pic"></image>
                <view class="flex-grow-1 pl30">
                    <view class="fs36 col10 pb10">{{userinfo.nickname}}</view>
                    <view class="fs30 col5">{{userinfo.focus_count}} 关注 | {{userinfo.fans_count}} 粉丝</view>
                </view>
                <view class="btn1" @click="toggleFocus()" v-if="!userinfo.is_focus_count">+ 关注</view>
                <view class="btn1" @click="toggleFocus()" v-else>已关注</view>
            </view>
            <view class="fs24 col5 m-ellipsis-l2 mtb30">简介：{{userinfo.bio}}</view>
        </view>
        <view class="xilu_classic_list fs32 col89">
            <view :class="classicIndex == index?'active':''" v-for="(item,index) in classList"
                @click="changeList(index)">{{item}}</view>
        </view>
        <view class="xilu_trends_box">
            <mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
                <!--  -->
                <view class="pt30" v-if="classicIndex == 0">
                    <goodslist :list="list" :showCollect="false" :showSaler="false"></goodslist>
                </view>
				<view v-else-if="classicIndex == 1">
					 <Trends :trends="trends" :showFocus="showFocus" :userId="myUserId" @togglesRec="togglesRec" @togglesCollect="togglesCollect" @comment="comment" @previewImg="previewImg" @toggleFocus="toggleFocus" @bindDetail="bindDetail" @togglesDel="togglesDel"></Trends>
				</view>
            </mescroll-body>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Trends from "@/components/trends/trends.vue";
    import goodslist from "@/components/goodslist/goodslist.vue";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {
            Trends,
            goodslist
        },
        data() {
            return {
				showFocus: false,
                statusBarHeight: 0,
                classList: ["宝贝", "帖子"],
                classicIndex: 0,
				userinfo:{},
				userId:0,
				myUserId:0,
                list: [],
                trends: []
            };
        },
        created() {
            this.getHeight();
        },
		onLoad(options) {
			this.userId = options.id || 0;
			this.classicIndex = options.tab=='forum'?1:0;
			let userinfo = this.$core.getUserinfo();
			this.myUserId = userinfo?userinfo.id:0
			this.fetchUserinfo();
		},
        methods: {
			fetchUserinfo(){
				this.$core.post({url: 'xilumarket.user/home',data: {user_id: this.userId},success: ret => {
						this.userinfo = ret.data;
					},fail: err => {}
				});
			},
            changeList(index) {
                this.classicIndex = index;
				this.mescroll.resetUpScroll();
            },
            getHeight() {
                let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
                this.statusBarHeight = sysInfo.statusBarHeight + 44;
            },
			/*上拉加载的回调*/
			upCallback(page) {
				this.classicIndex == 1 ? this.homeForum(page) : this.homeProduct(page);
			},
			homeProduct(page){
				// 此处可以继续请求其他接口
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$core.get({
					url: 'xilumarket.user/home_product',
					loading:false,
					data:{user_id:this.userId,page: pageNum,pageSize:pageSize},
					success: (ret) => {
						let data = ret.data;
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.last_page;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						//let totalSize = data.total;
						// 接口返回的是否有下一页 (true/false)
						//let hasNext = data.current_page;
				
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
						this.list = this.list.concat(curPageData); //追加新数据
				
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
				
						
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
				
			},
			homeForum(page) {
				// 此处可以继续请求其他接口
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$core.get({
					url: "xilumarket.user/home_forum",
					loading:false,
					data:{user_id:this.userId,page: pageNum,pageSize:pageSize},
					success: (ret) => {
						let data = ret.data;
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.last_page;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						//let totalSize = data.total;
						// 接口返回的是否有下一页 (true/false)
						//let hasNext = data.current_page;
				
						//设置列表数据
						if (page.num == 1) this.trends = []; //如果是第一页需手动置空列表
						this.trends = this.trends.concat(curPageData); //追加新数据
				
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
				
						
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
            // 点击收藏
			togglesCollect(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_collection',data: {forum_id: e.id},success: ret => {
						this.trends[e.index] = ret.data;
						this.$forceUpdate();
					},fail: err => {}
				});
			},
			// 点击点赞
			togglesRec(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_fav',data: {forum_id: e.id},success: ret => {
							this.trends[e.index] = ret.data;
							this.$forceUpdate();
					},fail: err => {
							
					}
				});
				
			},
			//删除
			togglesDel(e){
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_del',data: {forum_id: e.id},success: ret => {
						this.mescroll.resetUpScroll();
					},fail: err => {
							
					}
				});
			},
			// 点击评论
			comment(e) {
				uni.navigateTo({
					url: "",
				})
			},
			// 关注取关
			toggleFocus() {
			    this.$core.post({
			        url: 'xilumarket.forum/toggle_focus',
			        data: {
			            user_id: this.userinfo.id
			        },
			        success: ret => {
			            this.userinfo.is_focus_count = ret.data.is_focus_count;
			            //this.$forceUpdate();
			        },
			        fail: err => {
			            console.log(err);
			        }
			    });
			},
			//详情
			bindDetail(e){
				uni.navigateTo({
					url: '/discovery/trends_detail/trends_detail?id='+e.id
				})
			},
			// 点击预览
			previewImg(e) {
				let that = this;
				uni.previewImage({
					current: e.picIndex,
					urls: that.trends[e.arrIndex].images_text,
					fail() {
						uni.showToast({
							title:"网络错误，请重试"
						})
					}
				})
			}
		},
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;

            image {
                width: 750rpx;
                height: 750rpx;

            }

            &::after {
                content: "";
                display: block;
                width: 750rpx;
                height: 750rpx;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                backdrop-filter: blur(6rpx);
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        &_bg_block {
            width: 750rpx;
            height: calc(1003rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: calc(44px + var(--status-bar-height));
            left: 0;
            right: 0;
            z-index: 2;
        }
        

        &_bg_fix {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 4;
            height: calc(var(--status-bar-height) + 44px);
            overflow: hidden;

            image {
                width: 750rpx;
                height: 750rpx;
                position: relative;
                z-index: 2;
            }

            &::after {
                content: "";
                display: block;
                width: 750rpx;
                height: 750rpx;
                background: rgba(0, 0, 0, 0.5);
                z-index: 3;
                backdrop-filter: blur(6rpx);
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        &_detail {
            position: relative;
            z-index: 3;
            padding: 40rpx 30rpx;
        }

        &_pic {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
        }

        .btn1 {
            width: 130rpx;
            height: 65rpx;
            line-height: 63rpx;
            font-size: 24rpx;
            background: #333333;
            color: #fff;
        }

        &_avatar_list {
            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
                border: 1rpx solid #FFFFFF;
                margin-left: -12rpx;

                &:first-child {
                    margin-left: 0;
                }
            }
        }

        &_arrow_right {
            height: 35rpx;
            line-height: 35rpx;

            &::after {
                display: block;
                content: "";
                width: 35rpx;
                height: 35rpx;
                background: url(../../static/icon/placeorder_right.png) no-repeat center;
                background-size: 100%;
                margin-top: 2rpx;
            }
        }

        &_classic_list {
            background-color: var(--white);
            width: 100%;
            height: 88rpx;
            padding-top: 20rpx;
            overflow-x: scroll;
            white-space: nowrap;
            position: relative;
            z-index: 3;
            border-radius: 30rpx 30rpx 0 0;

            &::-webkit-scrollbar {
                display: none;
            }

            view {
                display: inline-block;
                margin-left: 55rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
            }
        }

        &_trends_box {
            position: relative;
            z-index: 3;
            background-color: var(--white);
        }

        .page-foot {
            .btn1 {
                width: 650rpx;
                height: 80rpx;
                border-radius: 40rpx;
                background: #ffc100;
                background-blend-mode: normal;
                margin: 10rpx auto;
                font-size: 30rpx;
                line-height: 78rpx;
            }
        }
    }
</style>
